<template>
	<view class="step">
		<view :class="['step-item',activ>=index?'activ':'']" v-for="(item,index) in steps" :key="index">
			<!-- 步骤图标 -->
			<view class="lien"></view>
			<view class="box">
				<view class="step-icon">
					<slot :name="'icon-'+index">
						<slot name="icon">
							<text v-if="activ>=index" class="iconfont icon-zhengque"></text>
							<text v-else class="iconfont icon-shenglvehao"></text>

						</slot>
					</slot>
				</view>
				<!-- 步骤标题 -->
				<view class="step-title" v-if="item.title">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		defineComponent
	} from 'vue';
	export default defineComponent({
		name: 'Step',
		props: {
			activ: {
				type: Number, // 当前步骤的索引值，从0开始，用于高亮当前步骤
				default: 1 // 默认值为0，即第一个步骤
			},
			steps: {
				type: Array,
				default: () => [{
						icon: null,
						title: "发布成功（等待接单）", // 默认值为null，即没有标题和图标
					},
					{
						icon: null,
						title: "已接单（请耐心等待查询结果）", // 默认值为null，即没有标题和图标
					},
					{
						icon: null,
						title: "已提交（请及时核对查询结果）", // 默认值为null，即没有标题和图标
					},
					{
						icon: null,
						title: "已完成（该订单已结束）", // 默认值为null，即没有标题和图标
					}
				] // 默认值为空数组，即没有步骤
			}
		}
	});
</script>

<style lang="less" scoped>
	.step {
		&-item {
			display: flex;
			flex-direction: column;
			align-items: baseline;
			justify-content: center;

			>.lien {
				display: inline-block;
				width: 4rpx;
				height: 50rpx;
				background-color: #BFBFBF; // 步骤图标的颜色，可以根据需要调整
				position: relative;
				left: calc(20rpx + 2rpx)
			}

			>.box {

				display: flex; // 步骤图标的内容居中显示，可以根据需要调整
				align-items: center; // 步骤图标的内容居中显示，可以根据需要调整
				justify-content: center; // 步骤图标的内容居中显示，可以根据需要调整


				.step-icon {
					width: 20px; // 步骤图标的大小，可以根据需要调整
					height: 20px; // 步骤图标的大小，可以根据需要调整
					border-radius: 25rpx;
					background-color: #FFF; // 步骤图标的颜色，可以根据需要调整
					border: 4rpx solid #BFBFBF; // 步骤图标的颜色，可以根据需要调整
					align-items: baseline;
					justify-content: center;
					color: #BFBFBF;
					display: flex; // 
					flex-direction: column; // 
					align-items: center; // 垂直居中
					justify-content: center; // 水平居中
				}

				.step-title {
					margin-left: 53rpx; // 
					font-family: PingFang;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}

			}




		}

		&-item:first-child {
			.lien {
				display: none; // 	
			}
		}

		.activ {
			>.lien {
				background-color: #C91C1F;
			}

			.step-icon {
				border: 4rpx solid #C91C1F; // 步骤图标的颜色，可以根据需要调整
				color: #C91C1F; // 步骤图标的内容颜色，可以根据需要调整
			}
		}
	}
</style>